<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘惠帮</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="${resources}/plugins/fontAwesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${resources}/plugins/swiper/3.3.1/swiper.min.css" rel="stylesheet" type="text/css">
    <link href="${resources}/css/common.css" rel="stylesheet" type="text/css">
    <link href="${resources}/css/bindingphone.css" rel="stylesheet" type="text/css">
    <#include "setwxshare.ftl"/>
</head>
<body>
<div id="container">
    <!--头部-->
    <div class="commonHeader">绑定手机
    	<a href="javascript:history.go(-1);" class="fa fa-chevron-left back"></a>
    </div>
     <#if member.username??>
       <!--绑定手机-->
    <form method="post" action="">
        <div class="phone">
            <div class="number1">
            	<!-- <span id="phonenumber">${member.username}</span> -->
               <input readonly="readonly" type="text" name="phonenumber" id="phonenumber" value="${member.username}"  placeholder="请输入手机号码"/><br/><br/>
            </div>
 		</div>
	</form>
    
    <#else>
  	<!--绑定手机-->
    <form method="post" action="">
        <div class="phone">
            <div class="number1">
                <input type="text" name="phonenumber" id="phonenumber" value="" placeholder="请输入手机号码"/><br/><br/>
                <div class="check">
                    <input type="button" name="checking" id="checking" value="发送验证码"  onclick="verificationCode(this);">
                </div>
            </div>
           
        	<div class="number2">
            <input type="text" name="phonesecurity" id="phonesecurity" value=""
                   placeholder="请输入手机短信中的验证码"/><br/><br/>
        	</div>
 		</div>
 		
        <!--按钮-->
        <div class="button">
            <a href="javascript:;" class="bindingphone">绑定手机</a>
        </div>
	</form>
    
    </#if>
</div>
</body>


<script src="${resources}/plugins/jquery/2.2.2/jquery.min.js"></script>
<script src="${resources}/js/common.js"></script>
<script>
/**
 * 手机验证码
 */
function verificationCode (DOM) {
   //by chan
    var telephone = $("#phonenumber").val();
    var telPattern =/^1[3|4|5|7|8]\d{9}$/;
  	if(!telPattern.test(telephone)){
  		common.alert({content:"请输入正确的手机号码"});
  		return false;
  	};
  	
  	//ajax
			$.ajax({
				type:"post",
				url:"${path}/message/verifycode",
				data:{
					username:telephone
				},
				success:function(data){
					if(data.code!='000'){
						common.alert({content:data.msg});
					}
				}
			})
	//ajax end
  	
	console.log(DOM);
    $(DOM).prop("disabled", true).css("backgroundColor", "#ccc").val("59s重新获取");
    clearInterval(verificationCodeTimer);
   	var time=60;
    var verificationCodeTimer = setInterval(function () {
    	time--;
        if(time > 0)
            $(DOM).val((time - 1) + "s重新获取");
        else
        {
            clearInterval(verificationCodeTimer);
            $(DOM).prop("disabled", false).css("backgroundColor", "#0195ff").val("获取验证码");


            //验证码回调
          
      	 	
			//验证码回调结束

        }
    },1000);
}

$(function(){
	 //绑定手机号
	 //by chan
	 $(".bindingphone").on('click',function(){
		 
		var telephone = $("#phonenumber").val();
       	var random = $("#phonesecurity").val();
       	var telPattern =/^1[3|4|5|7|8]\d{9}$/;
   	  	if(!telPattern.test(telephone)){
    	  		common.alert({content:"请输入正确的手机号码"});
    	  		return false;
   	  	};
   		//ajax
	 	$.ajax({
			type:"post",
			url:"${path}/manage/member/telephone",
			data:{
				telephone:telephone,
				random:random
			},
			success:function(data){
				if(data.code==000){
					common.alert({
						content:'绑定成功',
						ok:function(){
							window.location.href="${path}/manage/member";
						}
					});
				}else{
					common.alert({content:data.msg});
				}
			}
         })
         //ajax end
		 
	 })
 })
	
</script>
</html>